<template>
  <view class="container" style="padding-bottom: 90px" v-if="isLoaded">
    <!--  tab 栏 -->
    <view class="wh100">
      <view class="tabs">
        <u-tabs
          :list="tabMenus"
          lineColor="#F3C45D"
          lineWidth="30"
          :activeStyle="activeStyle"
          @click="onTabClick"
        >
          <view
            slot="right"
            style="padding-left: 4px"
            @tap.stop="showPopups = true"
          >
            <u-icon name="grid" size="28"></u-icon>
          </view>
        </u-tabs>
      </view>
      <view
        class="data-empty-wh100"
        v-if="tabMenus == null || tabMenus.length == 0"
      >
        <u-empty
          :text="`${topMenuSubject}为空,请新建${topMenuSubject}后再添加~`"
        />
      </view>
      <view v-else style="padding-bottom: 90px; display: flex; flex-wrap: wrap">
        <block v-if="pageList.length > 0">
          <view
            @click="onItemClick(item)"
            :id="`menu-${item.id}`"
            v-for="(item, _index) in pageList"
            :key="item.id"
            style="width: 33.33333%; padding: 12rpx"
          >
            <view
              style="
                width: 226rpx;
                height: 280rpx;
                border-radius: 18rpx;
                padding: 30rpx 21rpx;
              "
              :class="{
                bgWhite: item.deskStatus == 1 || item.deskStatus == 5,
                bgYellow: item.deskStatus == 2,
                bgGreen: item.deskStatus == 3,
                bgPurple: item.deskStatus == 4,
              }"
            >
              <view
                style="font-size: 30rpx; font-weight: bold"
                :style="{
                  color: item.deskStatus == 1 ? `#111111` : `#fff`,
                }"
                >{{ item[itemName] }}</view
              >
              <view
                class="jg"
                style="font-size: 22rpx"
                :style="{
                  color: item.deskStatus == 1 ? `#999999` : `#fff`,
                }"
              >
                <text>
                  {{ item.deskStatus == 1 ? 0 : item.orders[0].person }}/{{
                    item.manQty
                  }}
                </text>
                <image
                  v-if="
                    item.deskStatus == 2 ||
                    item.deskStatus == 3 ||
                    item.deskStatus == 4
                  "
                  src="../../../static/images/icon/time.png"
                  style="
                    width: 21rpx;
                    height: 21rpx;
                    margin-left: 16rpx;
                    margin-right: 6rpx;
                  "
                ></image>

                <text
                  v-if="
                    item.deskStatus == 2 ||
                    item.deskStatus == 3 ||
                    item.deskStatus == 4
                  "
                >
                  {{
                    (
                      Math.abs(
                        new Date() - new Date(item.orders[0].orderDate)
                      ) / 6000
                    ).toFixed(0)
                  }}分钟
                </text>
              </view>

              <view
                class="price"
                style="font-size: 26rpx"
                v-if="item.deskStatus != 1"
                :style="{
                  color: item.deskStatus == 1 ? `#999999` : `#fff`,
                }"
              >
                <block v-if="item.deskStatus == 2"> 待下单 </block>
                <block v-else>
                  <text style="font-size: 16rpx">￥</text>188
                </block>
              </view>

              <view
                class="price"
                style="font-size: 26rpx"
                v-if="item.deskStatus == 1"
                :style="{
                  color: item.deskStatus == 1 ? `#999999` : `#fff`,
                }"
                >未使用</view
              >

              <view
                class="price"
                style="font-size: 26rpx"
                v-if="item.deskStatus == 4"
                :style="{
                  color: `#fff`,
                }"
                >已预结</view
              >

              <!--          <view class="tags" v-if="item.deskStatus != 1">
                <text>会员</text>
              </view> -->
            </view>
          </view>
          <!-- 加载更多 -->
          <!--           <u-loadmore
            :status="loadStatus"
            :loading-text="loadingText"
            :loadmore-text="loadmoreText"
            :nomore-text="nomoreText"
            :loadmore="onReachBottomEvent"
            line
          /> -->
        </block>
        <view v-else class="data-empty-wh100">
          <u-empty :text="`${subject}为空`" />
        </view>
      </view>
    </view>

    <!-- 二维码弹窗 -->
    <u-popup
      :show="showQrCode"
      @close="closeQrCodePopup"
      @open="openQrCodePopup"
    >
      <view
        class="layout"
        style="height: 90vh; width: 100vw; overflow-y: scroll"
      >
        <block v-if="QrCoreList.length > 0">
          <image
            v-for="item in QrCoreList"
            :key="item.imgpath"
            style="width: 100vw; margin-bottom: 10px"
            mode="widthFix"
            :src="item.imgpath"
            show-menu-by-longpress
            @click="uPreviewImage(item.imgpath)"
          ></image>
        </block>

        <u-empty style="margin-top: 20px" v-else />
      </view>
    </u-popup>

    <!--  两层结构时使用  -->
    <!-- <view class="bottom-add" @click="btnAddClick" v-if="tabMenus.length > 0"
      >新建{{ subject }}</view
    > -->
    <!--  三层结构时使用  -->
    <!--     <view
        class="bottom-add"
        @click="btnAddClick"
        v-if="tabMenus.length > 0 && leftMenus.length > 0"
      >
        新建{{ subject }}
      </view> -->
    <!--  单层结构时使用  -->
    <!-- <view class="bottom-add" @click="btnAddClick" > 新建{{ subject }} </view> -->
    <my-popup-dialog
      :isShow="showPopups"
      :list="popList"
      :current="popupsIx"
      :top="176"
      :right="34"
      @onClickPopupItem="onClickPopMenu"
    >
    </my-popup-dialog>

    <!-- 开台弹窗 -->
    <u-popup :show="showKtPopup" @close="close" @open="open" :closeable="true">
      <view
        class="layout"
        style="
          background-color: rgb(255, 255, 255);
          font-size: 14px;
          width: 100vw;
        "
      >
        <!-- 显示屏 -->
        <view class="screen">
          <view
            class="th"
            style="
              width: 100vw;
              height: 124rpx;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 36rpx;
              font-weight: bold;
            "
          >
            {{ deskInfo.name }}
          </view>
          <view
            class="kk"
            style="
              height: 111rpx;
              margin: 0 30rpx;
              border: 1px solid #e8e8e8;
              border-radius: 10rpx;
              display: flex;
              justify-content: flex-end;
              align-items: center;
              padding: 0 25rpx;
            "
          >
            <view style="font-weight: 500; font-size: 22rpx; color: #999999"
              >请输入就餐人数:<text
                style="
                  font-weight: bold;
                  font-size: 80rpx;
                  color: #edae33;
                  margin-left: 5rpx;
                "
                >{{ person }}</text
              ></view
            >
          </view>
          <view class="ot" style="height: 30rpx"></view>
        </view>
        <!-- 输入框 -->
        <view class="kebo" style="width: 100vw">
          <view style="grid-area: a" class="table-cell" @click="onNumClick(1)"
            >1</view
          >
          <view style="grid-area: b" class="table-cell" @click="onNumClick(2)"
            >2</view
          >
          <view style="grid-area: c" class="table-cell" @click="onNumClick(3)"
            >3</view
          >
          <view style="grid-area: d" class="table-cell" @click="onNumClick(4)"
            >4</view
          >
          <view style="grid-area: e" class="table-cell" @click="onNumClick(5)"
            >5</view
          >
          <view style="grid-area: f" class="table-cell" @click="onNumClick(6)"
            >6</view
          >
          <view style="grid-area: g" class="table-cell" @click="onNumClick(7)"
            >7</view
          >
          <view style="grid-area: h" class="table-cell" @click="onNumClick(8)"
            >8</view
          >
          <view style="grid-area: i" class="table-cell" @click="onNumClick(9)"
            >9</view
          >
          <view
            style="grid-area: o; border-bottom: 1rpx solid #fff"
            class="table-cell"
            @click="onNumClick(0)"
            >0</view
          >
          <view style="grid-area: j" class="table-cell" v-on:click="onDelClick">
            <u-icon name="backspace" size="26"> </u-icon>
          </view>
          <view
            style="
              grid-area: k;
              background: linear-gradient(34deg, #f3c45d, #edac2f);
              border-right: 1rpx solid #edac2f;
              border-bottom: 1rpx solid #edac2f;
            "
            class="table-cell"
            @click="onKtClick"
            >开台</view
          >
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import {
  uShowLoading,
  uHideLoading,
  uNavigateTo,
  uPreviewImage,
  uSwitchTab,
  utoast,
  uGetStorageSync,
} from "../../../utils/uniUtils.js";
import { GetFoodDeskQrCode } from "../../../common/api";
import { orderReverse } from "../../../common/modules/orderAssistan.js";
export default {
  data() {
    return {
      activeStyle: {
        color: "#F3C45D",
      },
      loadStatus: "loadmore",
      loadingText: "努力加载中。。。",
      loadmoreText: "上拉加载更多~~",
      nomoreText: "已全部加载~~",

      tabMenus: [],
      leftMenus: [],
      pageList: [],

      topMenuSubject: "桌台区域",
      leftMenuSubject: "",
      subject: "桌台",
      topTabsIdx: 0,
      leftTabsIdx: 0,
      itemName: "name",
      rootRoute: "workbench",
      routeName: "tableRms",
      isLoaded: false,

      pageNum: 1,
      pageSize: 10,
      total: 0,
      showLoadMore: false,
      QrCoreList: [],
      showQrCode: false,
      showPopups: false,
      popList: [
        {
          name: "全部类型",
          value: 0,
        },
        {
          name: "空桌台",
          value: 1,
        },
        {
          name: "待下单",
          value: 2,
        },
        {
          name: "待结账",
          value: 3,
        },
        {
          name: "已预结",
          value: 4,
        },
      ],
      popupsIx: 0,
      showKtPopup: false,
      person: 0,
      deskInfo: {},
    };
  },

  onReachBottom() {
    this.onReachBottomEvent();
  },

  async mounted() {
    try {
      uShowLoading();
      const tabMenus = await this.GetTabMenus();
      if (tabMenus.length == 0) {
        return;
      }
      await this.GetPageList(this.topTabsIdx);
      //   this.getOtherData();
    } catch (error) {
      console.log("error", error);

      utoast("页面初始化失败！", "error");
      setTimeout(() => {
        uSwitchTab("/pages/tabBar/staging");
      }, 800);
    } finally {
      uHideLoading();
      this.isLoaded = true;
    }
  },
  methods: {
    uPreviewImage,
    async onClickPopMenu(e) {
      this.popupsIx = e.ix;
      this.showPopups = false;
      this.pageList = [];
      await this.GetPageList(this.topTabsIdx);
    },
    onReachBottomEvent() {
      console.log("onReachBottom");
      if (this.pageList.length < this.total) {
        this.showLoadMore = true;
        setTimeout(async () => {
          uShowLoading();
          if (this.showLoadMore) {
            this.pageNum += 1;
          }
          this.loadStatus = "loading";
          await this.GetPageList();
          uHideLoading();
        }, 300);
      } else {
        // utoast("没有更多数据了!", toastIconEnum.error);
        return;
      }
    },

    async onTabClick(e) {
      if (this.topTabsIdx == e.index) {
        return;
      }
      this.topTabsIdx = e.index;
      this.pageNum = 1;
      this.pageList = [];
      await this.GetPageList(e.index);
    },

    async onLeftTabClick(e) {},
    async GetTabMenus() {
      this.tabMenus = (
        await orderReverse({
          msgId: "",
          storeId: uGetStorageSync("store").id,
          code: 118,
          data: {},
          sign: uGetStorageSync("orderSign"),
        })
      ).data;
      if (this.tabMenus.length == 0) {
        this.topTabsIdx = -1;
      } else {
        this.topTabsIdx = 0;
      }
      return this.tabMenus;
    },
    async GetLeftMenus() {},

    async GetPageList(idx = 0) {
      // console.log("GetFoodFeed");
      // console.log("this.tabMenus[idx] ", this.tabMenus[idx]);

      //  有  tabMenu时放开
      if (this.tabMenus[idx] != null) {
        let { data } = await orderReverse({
          msgId: "",
          storeId: uGetStorageSync("store").id,
          code: 128,
          data: {
            type: this.popList[this.popupsIx].value,
            categoryId: this.tabMenus[idx].id,
          },
          sign: uGetStorageSync("orderSign"),
        });

        this.pageList = data;
        // this.total = total;
        /*         if (this.pageList.length == this.total) {
          this.loadStatus = "nomore";
        } else {
          this.loadStatus = "loadmore";
        } */
        this.showLoadMore = false; // console.log("tagList", list);
      }
    },
    getOtherData() {
      // ...
    },

    async btnAddClick() {
      uNavigateTo(
        `/pages/${this.rootRoute}/${this.routeName}/doEdit?mode=add `
      );
    },
    open() {
      this.person = 0;
      this.showKtPopup = true;
    },
    close() {
      this.showKtPopup = !true;
    },

    onItemClick(item) {
      console.log("item", item);

      switch (item.deskStatus) {
        case 1: {
          this.deskInfo = item;
          this.open();
          break;
        }

        case 2:
        case 3:
        case 4: {
          uNavigateTo(
            `/pages/workbench/orderingAssistant/classify?deskid=${item.orders[0].deskId}&orderid=${item.orders[0].orderIdStr}`
          );
          break;
        }
        default:
          break;
      }
    },

    async onQrCoreClick(e, item) {
      e.stopPropagation();
      const res = await GetFoodDeskQrCode({
        typeId: this.tabMenus[this.topTabsIdx].id,
        id: item.id,
      });
      this.QrCoreList = res.data.data;
      this.openQrCodePopup();
    },

    closeQrCodePopup() {
      this.showQrCode = !true;
    },

    openQrCodePopup() {
      this.showQrCode = true;
    },

    onNumClick(i) {
      let old = this.person;
      this.person = parseInt(this.person + "" + i);
      if (this.person > 999) {
        this.person = old;
      }
    },

    onDelClick() {
      this.person = parseInt(
        (this.person + "").substring(0, (this.person + "").length - 1) || 0
      );
    },
    async onKtClick() {
      if (this.person <= 0) {
        utoast("请输入人数", "error");
        return;
      }
      let res = await orderReverse({
        msgId: "",
        storeId: uGetStorageSync("store").id,
        code: 103,
        data: {
          deskId: this.deskInfo.id,
          person: this.person,
        },
        sign: uGetStorageSync("orderSign"),
      });
      if (res.status == 0) {
        utoast("开台成功!");
        setTimeout(() => {
          uNavigateTo(
            `/pages/workbench/orderingAssistant/classify?deskid=${this.deskInfo.id}&orderid=${res.data}`
          );
        }, 1000);
      }
    },
    // 方法放上面
  },
};
</script>

<style lang="scss" scoped>
@import "~@/static/styles/commonStyle.scss";
.container {
  height: 100vh;
  width: 100vw;
  overflow-y: scroll;
  background-color: #f7f7f7;
  .tabs {
    background-color: #fff;
  }
  .details {
    background-color: #fff;
  }
}

.bgWhite {
  background-color: #fff;
}

.bgYellow {
  background: linear-gradient(135deg, #fbc960, #f0b947);
}

.bgGreen {
  background: linear-gradient(135deg, #5fdcb2, #31d29c);
}

.bgPurple {
  background: linear-gradient(135deg, #855fdc, #6655fd);
}

.kebo {
  display: grid;
  grid-template-columns: 187rpx 187rpx 187rpx 1fr;
  grid-template-rows: 106rpx 106rpx 106rpx 167rpx;
  grid-template-areas:
    "a b c j"
    "d e f j"
    "g h i k"
    "o o o k";
  .table-cell {
    border: #f3f3f3 0.5rpx solid;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    // font-weight: 500;
    color: #111111;
    font-size: 36rpx;
  }
}
</style>
